<template>
  <div>
    <!-- 筛选头头 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-search"></i>
            筛选查询
            <div class="rightTop">
              <a @click="packUp">
                <i class="el-icon-arrow-up"></i>
                收起筛选
              </a>
              <el-button @click="Submit()">查询结果</el-button>
            </div>
          </el-header>
          <!-- 筛选条件 -->
          <div class="goodsrecycle-button-select-2" v-if="showSelect">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="用户账号：">
                <el-input
                  v-model.number="formInline.userId"
                  placeholder="用户ID/账号"
                  class="select-width-1"
                   clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="用户昵称：">
                <el-input
                  v-model="formInline.userName"
                  placeholder="用户昵称"
                  class="select-width-1"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="会员等级：">
                <el-select v-model.number="formInline.userMsId" clearable>
                  <el-option label="普通会员" :value="1"></el-option>
                  <el-option label="黄金会员" :value="2"></el-option>
                  <el-option label="平民会员" :value="4"></el-option>
              
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-container>
      </el-main>
    </el-container>

    <!-- 数据列表 -->
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            数据列表
            <div class="rightTop">
              <el-form
                :inline="true"
             
                class="demo-form-inline"
              >
                <el-dropdown>
                  <el-button type="primary">
                    导出数据<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>全部用户</el-dropdown-item>
                    <el-dropdown-item>选中用户</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
               
                <el-form-item label="" style="padding-top: 6px">
                  <el-select
                    v-model="sort"
                    placeholder="排序方式"
                    class="select-width-2"
                  >
                    <el-option label="用户昵称" :value="0"></el-option>
                    <el-option label="会员等级" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <!-- @selection-change="handleSelectionChange" -->
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>
              <el-table-column prop="userId" label="用户ID"></el-table-column>
              <el-table-column
                prop="userNumber"
                label="用户账号"
              ></el-table-column>
              <el-table-column
                prop="userName"
                label="用户昵称"
              ></el-table-column>
              <el-table-column
                prop="userMsId"
                label="会员等级"
              ></el-table-column>
              <el-table-column prop="useState" label="已使用"></el-table-column>
              <el-table-column prop="notState" label="未使用"> </el-table-column>
              <el-table-column prop="timeOut" label="已过期"> </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="lookCoupon(scope.$index, scope.row)"
                    type="text"
                    >查看明细</el-button
                  >
                  <el-button
                    size="mini"
                    @click="handsleCoupon(scope.$index, scope.row)"
                    type="text"
                    >赠送优惠券</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-main>
          <el-footer class="info-foot">
          <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>

          </el-footer>
        </el-container>
      </el-main>
    </el-container>
    <div>
      <el-dialog
        :title="'赠送优惠券'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
      >
        <el-header>
          <el-input
           v-model="couponName"
            placeholder="优惠券名称/优惠券编号"
            style="width: 200px"
            clearable
          ></el-input>
          <el-button
            style="text-align: center; width:30px"
            @click="Search(couponName)"
          >
            <i class="el-icon-search" />
          </el-button>
         <el-button type="primary" @click="addForm(form)" style="">一键赠送</el-button>
        </el-header>
        <el-main class="info-main padding-style">
          <el-table :data="logData"   @selection-change="handleSelectionChange" border style="width: 100%">
            <el-table-column
              type="selection"
              width="55"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="disName"
              label="优惠券名称"
            ></el-table-column>
            <el-table-column prop="price" label="面额">
              <i slot="prefix">￥</i>
            </el-table-column>
            <el-table-column
              prop="disStock"
              label="剩余张数"
            >
            <template slot-scope="scope">
            <p v-if="scope.row.disStock==0">无限制</p>
              <p v-if="scope.row.disStock>0">{{scope.row.disStock}}张</p>
            </template>
            </el-table-column>
            <el-table-column
              prop="useCondition"
              label="使用条件"
            >
             <template slot-scope="scope">
            <p v-if="scope.row.useCondition==0">无限制</p>
            <p v-if="scope.row.useCondition>0">满{{scope.row.useCondition}}元</p>

            </template>
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="有效期"
            ></el-table-column>
          </el-table>
        </el-main>
        <el-footer class="info-foot">
        <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-sizes="pageSizes2"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total2"
                  ></el-pagination>

        </el-footer>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import useApi from "@/api/user/list";
import discountApi from "@/api/operate/discount";
import disUseApi from "@/api/operate/disUse";
export default {
  data() {
    return {
      couponName: "",
      dialogVisible: false,
    // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,
      sort:0,

      // 分页数据
       pageSize2: 2,
      pageSizes2: [2, 3, 4, 5, 10, 25, 50, 100],
       total2: 5,
      currentPage2: 1,

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            }
          }
        ]
      },
      showSelect: true,
     
      formInline: {
       userId: "",
        userName: "",
        userMsId: ""
      },
      tableData: [],
      logData:[],

// 多选
      multipleSelection:[],

      getUserId:'',
    }
  },

  watch:{
    "sort":function(){
this.intData();

    }
  },
  methods: {

handleSelectionChange(val){

  this.multipleSelection =[];
     val.forEach(item=>{

                    this.multipleSelection[this.multipleSelection.length]=item.disId;
                })
},
// 赠送优惠券

addForm(){
  console.log(this.multipleSelection);
  console.log(this.getUserId);
  this.addDiUseData(this.getUserId,this.multipleSelection)
},
    // 
    packUp() {
      this.showSelect = !this.showSelect
      console.log("submit!")
    },
    Submit() {
     this.intData();
    },
    // 分页
    handleSizeChange(val) {
     this.pageSize=val;
     this.intData();
    },
    handleCurrentChange(val) {
     this.currentPage1=val;
     this.intData();
    },

       // 分页
    handleSizeChange2(val) {
     this.pageSize2=val;
     this.intDataTwo();
    },
    handleCurrentChange2(val) {
     this.currentPage2=val;
    this.intDataTwo();
    },
    lookCoupon(index, row) {
      console.log(index, row)
      this.$router.push({path:"/operation/couponDetails",query:{userId:row.userId}})
    },
    handsleCoupon(index, row) {
      console.log(index, row)
      this.getUserId=row.userId;
      this.dialogVisible = true
    },
    Search(couponName) {
      console.log("查询中" + couponName)
      this.intDataTwo();
    },

    intData(){

let dto={
pageNum:this.currentPage1,
 pageSize:this.pageSize,
 userId:this.formInline.userId,
 userName:this.formInline.userName,
 userMsId:this.formInline.userMsId,
 sort:this.sort,

}
useApi.getTotal(dto.pageNum, dto.pageSize,dto.userId,dto.userName,dto.userMsId,dto.sort).then(response=>{

  this.tableData=response.data.data.list;
  this.total=response.data.data.total;
})
    },

    // 获取优惠券数据
intDataTwo(){
  let dto={
pageNum:this.currentPage2,
pageSize: this.pageSize2,
disName:this.couponName,
disType:4,
sort:0

  }


discountApi.getList(dto.pageNum, dto.pageSize,dto.disName,dto.disType,dto.sort).then(response=>{

console.log(response);

this.logData=response.data.data.list;
this.total=response.data.data.total2;

})

},

addDiUseData(useId,ids){
let dto={

  useId:useId,
  ids:ids,
 
}
  disUseApi.addOne(dto).then(response=>{
    console.log(response);
    this.$message(response.data.message);
  })
}
  },

  created(){
    this.intData();
      this.intDataTwo();
  }
}
</script>
<style scoped>
.rightTop {
  float: right;
}
.goodsrecycle-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 220px;
}
.select-width-2 {
  width: 150px;
}
.centerTag {
  text-align: center;
}
.dateCss {
  float: left;
}
</style>
